<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06自定义JS对象</title>
</head>
<body>

<table border="1px">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>

<script>
    //3.定义一个数组，存放多个商品对象
    let productArr = [
        {title: '华为手机', price: 1999, count: 100},
        {title: '小米14', price: 9999, count: 2100},
        {title: '苹果16', price: 19999, count: 1200},
        {title: '魅族', price: 19919, count: 111100},
    ];
    console.log(productArr);
    console.log(productArr[2]);


    let tableE = document.querySelector('table');
    //遍历上方的商品数组，有几件商品，就创建几行表格数据
    for (let i = 0; i < productArr.length; i++) {
        let trE = document.createElement('tr');
        let pname = document.createElement('td');
        let price = document.createElement('td');
        let pcount = document.createElement('td');
        pname.innerText = productArr[i].title;
        price.innerText = productArr[i].price;
        pcount.innerText = productArr[i].count;
        trE.append(pname, price, pcount);
        tableE.append(trE);
    }

    //1.实例化一个自带属性与方法的对象
    let p1 = {
        name: '张三',
        age: 18,
        say: function () {
            console.log('hello,sb,我是' + this.name);
        }
    }
    console.log(p1);
    p1.say();

    //2.先定义一个空对象，再动态添加属性与方法
    let p2 = {};
    p2.name = '张三';
    p2.age = 20;
    p2.eat = function () {
        console.log(this.name + '正在吃东西')
    };
    console.log(p2);
    p2.eat();


</script>
</body>
</html>